<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: OBKoro1
 * @LastEditTime: 2022-12-05 11:55:46
-->
<template>
  <el-table
    :data="planData"
    border
    size="small"
    style="width: 50%; margin-bottom: 10px"
  >
    <el-table-column label="总参数方案信息" align="center">
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="reservoir" label="库区" align="center" />
      <el-table-column prop="createName" label="创建人" align="center" />
    </el-table-column>
  </el-table>

  <div style="height: 85%">
    <ParamsAddSX v-if="planData[0].reservoir != '长江中下游'" />
    <ParamsAddCJ v-else />
  </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  nextTick,
  provide,
} from "vue";
import { RouteParams, useRoute, useRouter } from "vue-router";

import ParamsAddSX from "./paramsAddSX.vue";
import ParamsAddCJ from "./paramsAddCJ.vue";

export default defineComponent({
  components: {
    ParamsAddSX,
    ParamsAddCJ,
  },
  name: "paramsAdd",
  setup: () => {
    const route = useRoute();
    const router = useRouter();

    const state: { planData: RouteParams[] } = reactive({
      // 方案参数
      planData: [{}],
    });

    onMounted(() => {
      console.log(route.params);

      state.planData[0] = route.params;
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="less">
.sedFormInput {
  margin-bottom: 20px;
  .form-box {
    display: flex;
  }
  .el-input {
    width: 100px;
    margin: 0 4px 8px 0;
  }
}
</style>
